import React, {
  Component
} from 'react'
import {
  StyleSheet,
  View,
  ScrollView,
  Image,
  Text,
  TouchableOpacity
} from 'react-native'
import {Icon} from '../../components/common/icon'
import FamilyManagement from './FamilyManagement'
import FamilyTransfer from './FamilyTransfer'
import NavigationBar from '../../components/common/NavigationBar'

class HouseInfo extends Component {
  constructor(props) {
    super(props)

    // 初始状态
    this.state = {
      houseData: {

      }
    }
  }
  render() {
    return (
      <View style = {styles.container}>
        <NavigationBar
          title={'房屋管理'}
          statusBar={{backgroundColor: '#ffffff', barStyle: 'dark-content'}}
          style={{borderBottomWidth: 1, borderColor: '#EDEDED', backgroundColor: '#ffffff'}}
          navigator={this.props.navigator}
        />
        <ScrollView showsVerticalScrollIndicator={false}>
          <View style={styles.itemTop}>
            <View style={styles.item}>
              <Text style={styles.title}>小区</Text>
              <Text style={styles.itemText}>城西银泰D座902</Text>
            </View>
            <View style={styles.item}>
              <Text style={styles.title}>厅室分布</Text>
              <Text style={styles.itemText}>三室两厅两卫</Text>
            </View>
            <View style={styles.item}>
              <Text style={styles.title}>面积</Text>
              <Text style={styles.itemText}>89㎡</Text>
            </View>
          </View>
          <View style={styles.itemTop}>
            <TouchableOpacity onPress = {this._onPressButton.bind(this)} >
              <View style={styles.item}>
                <Text style={styles.title}>查看户型图</Text>
                <Icon name="icon_jiantou" size={16} color="#999999" />
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress = {this._onPressButton.bind(this)} >
              <View style={styles.item}>
                <Text style={styles.title}>房间管理</Text>
                <View style={styles.itemIcon}>
                  <Text style={styles.itemText}>5</Text>
                  <Icon name="icon_jiantou" size={16} color="#999999" />
                </View>
              </View>
            </TouchableOpacity>
          </View>
          <View style={styles.itemTop}>
            <TouchableOpacity onPress = {this._onPressButton.bind(this)} >
              <View style={styles.item}>
                <Text style={styles.title}>家庭命名</Text>
                <View style={styles.itemIcon}>
                  <Text style={styles.itemText}>诸葛孔明的家</Text>
                  <Icon name="icon_jiantou" size={16} color="#333333" />
                </View>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress = {this._onPressButton.bind(this, FamilyManagement)} >
              <View style={styles.item}>
                <Text style={styles.title}>家庭成员管理</Text>
                <View style={styles.itemIcon}>
                  <Text style={styles.itemText}>3人</Text>
                  <Icon name="icon_jiantou" size={16} color="#333333" />
                </View>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress = {this._onPressButton.bind(this, FamilyTransfer)} >
              <View style={styles.item}>
                <Text style={styles.title}>管理员转让</Text>
                <Icon name="icon_jiantou" size={16} color="#333333" />
              </View>
            </TouchableOpacity>
          </View>
          <TouchableOpacity onPress = {this._onPressButton.bind(this)} >
            <View style={styles.bottomView}>
              <Text style={styles.btnText}>解除绑定</Text>
            </View>
          </TouchableOpacity>
        </ScrollView>
      </View>
    )
  }
  _onPressButton(component) {
    this.props.navigator.push({
      component: component,
      params: {
        navigator: this.props.navigator
      }
    })
  }
}

export default HouseInfo

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F4F4F4',
    flex: 1,
  },
  itemTop: {
    borderTopColor: '#EDEDED',
    borderTopWidth: 1,
    borderBottomColor: '#EDEDED',
    borderBottomWidth: 1,
    marginTop: 10,
  },
  item: {
    height: 52,
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingLeft: 20,
    paddingRight: 10,
  },
  title: {
    color: '#666666',
    fontSize: 14,
  },
  itemIcon: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  itemText: {
    fontSize: 13,
    color: '#333333',
  },
  bottomView: {
    justifyContent: 'center',
    alignItems: 'center',
    borderTopColor: '#EDEDED',
    borderTopWidth: 1,
    borderBottomColor: '#EDEDED',
    borderBottomWidth: 1,
    height: 50,
    backgroundColor: '#ffffff',
    marginTop: 10,
  },
  btnText: {
    color: '#00A5AD',
    fontSize: 14,
  },
})
